import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import menberIcon from '../../../assets/images/qiji/usercenter/menber.png';
import orderIcon from '../../../assets/images/qiji/usercenter/order.png';
import invoiceIcon from '../../../assets/images/qiji/usercenter/invoice.png';
import helpIcon from '../../../assets/images/qiji/usercenter/help.png';
import LogouAlert from '../../components/alert/alert.logout';

import tel from '../../../assets/images/cq/user/user-tel-icon.png';
import {
  OLD_QIJI_ORDER_LIST,
  OLD_QIJI_HELP,
  OLD_QIJI_INVOICE,
  SERVICE_TEL,
} from '../../constants/setting';
import { callService } from '../../utils/func';

@connect(({ user }) => {
  return {
    balance: user.getIn(['account', 'balance']),
  };
})
class UserCenter extends BaseComponent {
  goVip = () => {
    this.props.history.push('vipCard');
  }

  goOrderList = () => {
    window.location.href = OLD_QIJI_ORDER_LIST;
  }

  goInvoice = () => {
    window.location.href = OLD_QIJI_INVOICE;
  }

  goHelp = () => {
    window.location.href = OLD_QIJI_HELP;
  }

  showLogoutAlert = () => {
    this.alert.show();
  }

  logout = () => {
    this.alert.close();
    this.props.dispatch({
      type: 'user/logout',
    });
  }
  render() {
    return (
      <div className="user-center-qiji">
        <div className="tab-sect">
          <div className="item" onClick={this.goVip}>
            <img src={menberIcon} alt="" />
            <div>权益兑换</div>
          </div>
          <div className="item" onClick={this.goOrderList}>
            <img src={orderIcon} alt="" />
            <div>交易记录</div>
          </div>
          <div className="item" onClick={this.goInvoice}>
            <img src={invoiceIcon} alt="" />
            <div>申请开票</div>
          </div>
          <div className="item" onClick={this.goHelp}>
            <img src={helpIcon} alt="" />
            <div>鱿鱼问答</div>
          </div>
        </div>
        <div className="flex-blank" />
        <div className="loginout-but" onClick={this.showLogoutAlert}>退出登录</div>
        <div className="footer-sect" onClick={callService}>
          <div>
            <div className="title">如需帮助 请拨打客服电话</div>
            <div><span className="tel">{SERVICE_TEL}</span> (8:00~22:00)</div>
          </div>
          <img className="tel-icon" src={tel} alt="" />
        </div>
        <LogouAlert ref={alert => this.alert = alert} confirmFunc={this.logout} title="是否确定退出汽集网？" />
      </div>
    );
  }
}

export default UserCenter;
